<template>
  <div class="weEditor">
    <div class="title">
      <input type="text" placeholder="请在这里输入标题" v-model="$title" maxlength="64">
    </div>
    <div class="author">
      <input type="text" placeholder="请输入作者" v-model="$author" maxlength="16">
    </div>
    <!-- 加载编辑器的容器 -->
    <script :id="editorId" name="content" type="text/plain">
    </script>
  </div>
</template>
<script>
  import '@static/ueditor/ueditor.config'
  import '@static/ueditor/ueditor.all'
  import '@static/ueditor/lang/zh-cn/zh-cn'
  export default {
    data () {
      return {
        editorId: 'container'
      }
    },
    mounted () {
      this.initEditor()
    },
    props: ['title', 'author', 'content', 'value'],
    watch: {
      'content': function (now) {
      }
    },
    computed: {
      $title: {
        get () {
          return this.title
        },
        set (val) {
          this.$emit('update:title', val)
        }
      },
      $author: {
        get () {
          return this.author
        },
        set (val) {
          this.$emit('update:author', val)
        }
      }
    },
    methods: {
      // 初始化编辑器
      initEditor () {
        this.ue = UE.getEditor(this.editorId, {
          toolbars: [
              ['undo', 'redo', '|', 'fontsize', '|', 'blockquote', 'horizontal', '|', 'removeformat', 'formatmatch', 'link', 'unlink'],
              ['bold', 'italic', 'underline', 'forecolor', 'backcolor', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'insertorderedlist', 'insertunorderedlist', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter']
          ],
          initialFrameWidth: 800,
          initialFrameHeight: 400,
          minFrameWidth: 800,
          minFrameHeight: 400,
          allHtmlEnabled: true,
          scaleEnabled: false,
          wordCount: false,
          elementPathEnabled: false,
          autoFloatEnabled: false
        })
        this.ue.addInputRule(function (root) {
          root.getNodesByTagName('img').forEach(node => {
            const src = node.getAttr('data-src') || node.getAttr('_src')
            node.setAttr('src', src)
          })
        })
        this.ue.addListener('contentChange', () => {
          this.$emit('contentChange', this.ue.getContent())
        })
      },
      execCommand (command, str) {
        this.ue.execCommand(command, str)
      },
      setContent (cont) {
        if (!this.ue.isReady) {
          this.ue.addListener('ready', () => {
            this.ue.setContent(cont)
          })
        } else {
          this.ue.setContent(cont)
        }
      }
    }
  }
</script>
<style lang="scss">
  .weEditor{
    position:relative;
    .title{
      position:absolute;top:100px;left:90px;z-index:1000;
      input{width:600px;height: 46px;border:0;line-height: 46px;font-size: 22px;color:#222;outline:0}
    }
    .author{
      position:absolute;top:170px;left:90px;z-index:1000;
      input{width:600px;height: 22px;border:0;line-height: 22px;color:#222;outline:0}
    }
    .edui-editor-iframeholder{
      margin:140px 0 50px 0;
      padding-top:1px;
      &:before{content:'';display:block;margin:0 90px;height:1px;background:#e7e7eb}
    }
    .audio_iframe{height:64px}
  }
</style>
